<include file="Public/head"/>
<script type="text/javascript" src="__PUBLIC__/web/layer/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/web/jquery-validation-1.14.0/lib/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/web/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/web/css/main.css"/>
<link rel="stylesheet" href="__PUBLIC__/web/css/index2.css"/>
<link rel="stylesheet" href="__PUBLIC__/web/css/iphone_css.css"/>
<style>
    .error{
        color: #ff0000;
    }
</style>
<body>
    <div class="formbody">
        <div class="formtitle" style="height: 50px;line-height: 50px;">
            <volist name="view_title" id="v">
                <a href="{:U('Design/index',array('id'=>$v['view_id']))}"><span>{$v.view_name}</span></a>
            </volist>
        </div>
        <hr>
        <div class="forminfo" style="display: block;">
            <!--<div class="iphone-body">
                <div class="iphone-title" style='position: absolute;background-color: {$info_option["title_color"]};'>
                    <if condition="$info_option['title']">{$info_option['title']}<else/>{:L('weimingming')}</if>
                </div>
                <div id="box" style="width: 100%;min-height:500px;background: rgb(220,220,220);">
                
                </div>
            </div>-->
            <div class="device-ios" style="background-size:100% 100%;background-image: url(__PUBLIC__/images/iphone.png)">
                <div style="position: relative;">
                  <div class="device-screen">
                    <div class="wx_title" name="sub_ground" data-value="no_delete" style="position: absolute;background-color:{$info_option['title_color']}; ">
                      <div style="float:left;height:20px;width:30px;padding-left:5px;margin: 6px 0px;">
                        <img style="width:100%;height:100%" src="__PUBLIC__/images/back.png"/>
                      </div>

                      <div name="text_input" style="float:left;line-height:30px;text-align:center;font-size:15px;width:189px;color:white;">
                        <if condition="$info_option['title']">{$info_option['title']}<else/>{:L('weimingming')}</if>
                      </div>

                      <div style="float:right;height:30px;width:30px;">
                        <img style="width:100%;height:100%" src="__PUBLIC__/images/more.png"/>
                      </div>
                    </div>

                    <div class="wx_content" style="margin-top: 35px;">
                        {$first}
                    </div>
                  </div>
                </div>
            </div>
            <form id="form" method="post" action="{:U('Design/save')}" enctype="multipart/form-data">
                <div style="float:left;width:494px;height:auto;background:#fdfdfd;padding:15px 10px;margin-left:18px;border:1px solid #ddd;border-radius:5px;margin-top:0;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">背景颜色</label>
                            <div class="layui-input-block">
                                <input type="color" name="title_color" onchange="change_color(this)" style="width: 80px;height: 38px;line-height: 38px;border: none;"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">输入标题</label>
                            <div class="layui-input-block">
                                <input type="text" id="title" name="title" oninput="change_title(this)" class="layui-input"/>
                            </div>
                        </div>
                </div>
                <div class="detail" <if condition="$first_detail">style="display:block;"</if>>
                    {$first_detail}
                </div>
                <input type="hidden" name="id" value=""/>
                <input type="hidden" name="pid" value="{$view_id}"/>
            </form>
            <div class="nav-bottom">
                <ul>
                    <volist name="view_name" id="vo">
                        <li onclick="get_connent({$vo['view_id']})">+{$vo.view_name}</li>
                    </volist>
                </ul>
                <div style="clear: both;height: 50px;border-top: 1px dashed rgb(220,220,220);">
                    <div style="width: 50px;height: 20px;border-radius: 3px; float: right;margin-right: 5px;background-color: #1ab394;border-color: #1ab394;color: #FFFFFF;text-align: center;line-height: 20px;cursor: pointer;margin-top: 15px;" onclick="$('#form').submit()">保 存</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $('#form').validate({
            rules:{
                title:'required',
            },
            messages:{
                title:"请输入标题",
            },
            submitHandler: function(form){
                $(form).ajaxSubmit(function(msg){
                    if(msg.code == 1){layer.msg(msg.messages)}else if(msg.code==0){layer.msg(msg.messages)}
                });
            }
        });




    });

    <if condition="$sum_option">
        var config = {$sum_option};
        for( var key in config){
            if( $('input[name='+key+']').attr('type') != 'file'){
                $('input[name='+key+']').val(config[key]);
            }
        }
    </if>

    function get_connent(id){
        $.get('{:U("Design/display_view")}',{'id':id},function(msg){
            $('.wx_content').html(msg.info);
            $('.detail').html(msg.detail);
            $('.detail').show();
            $('input[name=id]').val(msg.id);
            $('.wx_title').css('background-color','#000000');
            $('input[name=title_color]').val('#000000');
            $('input[name=title]').val("{:L('weimingming')}");
            $('div[name=text_input]').html("{:L('weimingming')}");
        },'json');
    }


    function change_color(data){
        $('.wx_title').css('background-color',$(data).val());
    }

    function change_title(data){
        $('div[name=text_input]').html($(data).val());
    }




</script>